<template>
  <div style="padding-left: 15px">
    <el-card id="tree" style="float: left; margin-top: 10px ;margin-right: 10px;height:100%;width:20%;">
      <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
      </el-input>
      <el-tree style="margin-top: 12px;"
               class="filter-tree"

               :data="this.$store.state.data"
               :highlight-current="true"
               node-key="id"

               current-node-key="id"
               :expand-on-click-node="true"
               :props="defaultProps"

               accordion
               @node-click="handleNodeClick"
               :filter-node-method="filterNode"
               ref="tree">
      </el-tree>

    </el-card>

    <div id="table" style="float: left;height:100%;width:78%;">


      <div style="padding: 10px 0">
        <!--      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>-->
        <!--      <el-popconfirm-->
        <!--          style="margin-left: 10px"-->
        <!--          confirm-button-text='确定'-->
        <!--          cancel-button-text='我再想想'-->
        <!--          icon="el-icon-info"-->
        <!--          icon-color="red"-->
        <!--          title="您确定批量删除这些数据吗？"-->
        <!--          @confirm="delBatch"-->
        <!--      >-->
        <!--        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>-->
        <!--      </el-popconfirm>-->

        <el-input id="tableName" placeholder="请输入数据表名" style="width:150px" v-model="tableForm.name"></el-input>
        <el-select  v-model="tableForm.father" placeholder="请选择数据类型" @change="selectDataType">
          <el-option
                  v-for="item in this.tableTypeSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>

        <el-upload
                :action="myAction"
                :show-file-list="false"
                accept="xlsx"
                :on-success="handleExcelImportSuccess"
                :before-upload="beforeUpload"
                style="display: inline-block">
          <el-button type="primary" style="margin-left: 10px;" @click="importClick">导入 <i class="el-icon-bottom"></i></el-button>
        </el-upload>
        <el-button type="primary" @click="exp" style="margin-left: 10px;">导出 <i class="el-icon-top"></i></el-button>
      </div>


      <div v-if="parentData==='点数据'">
        <el-table :data="tableData" border stripe style="margin-top: 10px" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <!--      <el-table-column prop="file_name" label="文件名" width="100"></el-table-column>-->
          <el-table-column prop="opera" label="运营公司" width="100"></el-table-column>
          <el-table-column prop="cid" label="车辆ID" width="120"></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column prop="lng" label="纬度"></el-table-column>
          <el-table-column prop="lat" label="经度"></el-table-column>
          <el-table-column prop="grid" label="网格id"></el-table-column>
          <el-table-column prop="road" label="路链id"></el-table-column>
          <el-table-column prop="speed" label="速度"></el-table-column>
          <el-table-column prop="direct" label="方向"></el-table-column>
          <el-table-column prop="hstate" label="乘车状态"></el-table-column>
          <el-table-column prop="cstate" label="车辆状态"></el-table-column>
          <el-table-column prop="other" label="其它"></el-table-column>
          <!--    <el-table-column label="操作"  width="200" align="center">-->
          <!--      <static #default={row}>-->
          <!--        <el-button type="info" @click="handleEdit(row)"><i class="el-icon-edit"></i></el-button>-->
          <!--        <el-popconfirm-->
          <!--                style="margin-left: 5px"-->
          <!--                confirm-button-text='确定'-->
          <!--                cancel-button-text='我再想想'-->
          <!--                icon="el-icon-info"-->
          <!--                icon-color="red"-->
          <!--                title="您确定删除吗？"-->
          <!--                @confirm="del(row.id)"-->
          <!--        >-->
          <!--          <el-button type="danger" slot="reference"><i class="el-icon-delete"></i></el-button>-->
          <!--        </el-popconfirm>-->
          <!--      </static>-->
          <!--    </el-table-column>-->
        </el-table>
      </div>
      <div v-else-if="parentData==='OD线数据'">
        <el-table :data="tableData1" border stripe style="margin-top: 10px">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="olng" label="起点经度" ></el-table-column>
          <el-table-column prop="olat" label="起点维度" ></el-table-column>
          <el-table-column prop="dlng" label="终点经度"></el-table-column>
          <el-table-column prop="dlat" label="终点维度"></el-table-column>
        </el-table>
      </div>
      <div v-else-if="parentData==='轨迹线数据'">
        <el-table :data="tableData1" border stripe style="margin-top: 10px">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="time" label="时间戳"></el-table-column>
          <el-table-column prop="status" label="载客状态" ></el-table-column>
          <el-table-column prop="lng" label="经度" ></el-table-column>
          <el-table-column prop="lat" label="纬度"></el-table-column>
<!--          <el-table-column prop="dlng" label="终点经度"></el-table-column>-->
<!--          <el-table-column prop="dlat" label="终点维度"></el-table-column>-->
        </el-table>
      </div>
      <!--    <div style="padding: 10px 0">-->
      <!--      <el-pagination-->
      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="pageNum"-->
      <!--          :page-sizes="[5, 10, 15, 20]"-->
      <!--          :page-size="pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="total">-->
      <!--      </el-pagination>-->
      <!--    </div>-->

      <el-dialog title="数据结构" :visible.sync="dialogFormVisible" width="30%" >
        <el-form label-width="80px" size="small" style="padding: 0 25px 0 0;">
          <!--        <el-form-item label="文件名">-->
          <!--          <el-input v-model="form.file_name" autocomplete="off"></el-input>-->
          <!--        </el-form-item>-->
          <el-form-item label="运营公司">
            <el-input v-model="form.opera" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="form.lng" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网格id">
            <el-input v-model="form.grid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路链id">
            <el-input v-model="form.road" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="速度">
            <el-input v-model="form.speed" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="方向">
            <el-input v-model="form.direct" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="乘车状态">
            <el-input v-model="form.hstate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆状态">
            <el-input v-model="form.cstate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="其它">
            <el-input v-model="form.other" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {serverIp} from "../../../public/config";

  export default {
    name: "User",
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    computed:{
      myAction(){
        if (this.selectType === '点数据'){
          return this.baseURL + '/taxiData/import'
        }else if(this.selectType === '轨迹线数据'){
          return this.baseURL + '/traceData/import'
        }else{
          return this.baseURL + '/lineData/import'
        }
      }
    },

    data(){
      return{
        //id:"",
        daoruData:'',
        parentData:'',
        selectType:'点数据',
        tableTypeSelect: [
          {
            value: '点数据',
            label: '点数据'
          },
          {
            value: '轨迹线数据',
            label: '轨迹线数据'
          },
          {
            value: 'OD线数据',
            label: 'OD线数据'
          },
        ],
        isShow: 'true',
        // baseURL:'http://10.100.58.105:9090',
        baseURL:'http://47.119.187.14:9006',
        tableForm:{},
        menuIds: {},
        tableName: '',
        tableType: '',
        tableData:[],
        tableData1:[],
        total: 0,
        pageNum:1,
        pageSize:10,
        username: "",
        password:"",
        nickname:"",
        email: "",
        address: "",
        avatar:"" ,
        dialogFormVisible:false,
        multipleSelection: [],
        form:{},
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },

        tableNameTem:'',



      }
    },
    created() {

      this.$store.commit('loadMenuData')
      // console.log(this.$store.state.data)
      // this.loadMenuSet()
      // this.loadData()
    },
    methods:{
      selectDataType(data){
        // 将data对象解构
        this.selectType = data
        console.log(this.selectType,'data');
      },
      beforeUpload(){
        // console.log(this.daoruData,'初始链接');
        // if ((document.getElementById('tableName').value !== '') && (this.selectType === '点数据')){
        //   // this.daoruData = `http://`+serverIp+`/taxiData/import`
        //   // this.daoruData = 'http://10.100.58.105:9090/taxiData/import'
        //   this.$message.error("导入点数据")
        //
        // }else{
        //   this.daoruData = `http://47.119.187.14:9006/lineData/import`
        //   this.$message.error("导入线数据")
        // }
        // console.log(this.myAction,'使用链接');
      },

      importClick(){

        this.request.post("/dataMenu/add", this.tableForm).then(res => {
          if (res.data) {
            // this.$message.success("保存成功")
            this.dialogFormVisible = false
            //this.load()
          } else {
            this.$message.error("保存失败")
          }
        });
      },

      // load(){
      //   this.request.get("/taxiData/page",
      //       {
      //         params: {
      //           pageNum: this.pageNum,
      //           pageSize: this.pageSize,
      //         }
      //       }).then(res => {
      //     console.log(res.data)
      //     this.tableData = res.data.records
      //     this.total = res.data.total
      //   })
      // },
      save() {
        this.request.post("/dataMenu", this.form).then(res => {
          if (res.data) {
            this.$message.success("保存成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })
      },
      handleAdd() {
        this.dialogFormVisible = true
        this.form = {}
      },
      handleEdit(row) {
        this.form = row
        // console.log(row)
        // console.log(this.form)
        this.dialogFormVisible = true
      },
      // del(id) {
      //   this.request.delete("/user/" + id).then(res => {
      //     if (res.data) {
      //       this.$message.success("删除成功")
      //       this.load()
      //     } else {
      //       this.$message.error("删除失败")
      //     }
      //   })
      // },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      // delBatch() {
      //   let ids = this.multipleSelection.map(v => v.id)
      //   this.request.post("/user/del/batch", ids).then(res => {
      //     if (res.data) {
      //       this.$message.success("批量删除成功")
      //       this.load()
      //     } else {
      //       this.$message.error("批量删除失败")
      //     }
      //   })
      // },
      // handleSizeChange(pageSize) {
      //   // console.log(pageSize)
      //   this.pageSize = pageSize
      //   this.load()
      // },
      // handleCurrentChange(pageNum) {
      //   // console.log(pageNum)
      //   this.pageNum = pageNum
      //   this.load()
      // },
      exp() {
        window.open(`http://${serverIp}/taxiData/export`)
      },
      handleExcelImportSuccess() {
        this.$message.success("导入成功")
        //this.load()
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // handleNodeClick(data) {
      //   if(data.children == null){
      //     console.log(data.label)
      //   }
      //     if (data.label==="taxi_data"){
      //       this.load()
      //     }
      // },

      handleNodeClick(defaultKeys,node) {
        //判断当前点击的是哪一层节点；1、最外层父节点；2、第二次层子节点；3、末层节点内容；4、.....以此类推
        // 并根据点击的内容显示不同的数据
        // 部分变量赋值为空是为了处理来回点击节点数据传值错误而写的
        if(node.level == 1){
          // this.companyName = name
          // this.gradeName = ''
        } else if (node.level == 2){
          // this.gradeName = name
          //当前节点的父节点
          this.parentData = node.parent.data.label
          //当前节点
          this.tableNameTem = node.label;
          console.log(this.tableNameTem,'当前节点');
          console.log(this.parentData,'当前节点的父节点');

          if (this.parentData === '点数据'){
            // /taxiData/page  接口里分页的代码调整
            this.request.get("/taxiData/clickLabel",
                    {
                      params:{
                        tableNameTem: this.tableNameTem,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                      }
                    },
            ).then(res => {
              console.log(res.data)
              this.tableData = res.data
              this.total = res.data.total
            })
          }else if(this.parentData === '轨迹线数据'){
            this.request.get("/traceData/clickLabel",
                    {
                      params:{
                        tableNameTem: this.tableNameTem,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                      }
                    },
            ).then(res => {
              console.log(res.data)
              this.tableData1 = res.data
              this.total = res.data.total
            })
          }else{
            this.request.get("/lineData/clickLabel",
                    {
                      params:{
                        tableNameTem: this.tableNameTem,
                        // pageNum: this.pageNum,
                        // pageSize: this.pageSize,
                      }
                    },
            ).then(res => {
              console.log(res.data)
              this.tableData1 = res.data
              this.total = res.data.total
            })
          }


        }
      },

    },

  }
</script>

<style scoped>

</style>